<!--
 * @Author: lujiangbo knight_lujb@163.com
 * @Date: 2024-10-18 16:03:22
 * @LastEditors: lujiangbo knight_lujb@163.com
 * @LastEditTime: 2024-10-22 08:34:16
 * @Description: 
-->
<template>
    <div class="container">
        <div class="top-container">
            <div class="top-left-box">红包群5（1915）</div>
            <div class="top-right-box">
                <img :src="icon_h5" height="30px" alt="">
                <div style="color: #fff;font-size: 14px;">5723</div>
                <img :src="icon_h6" height="30px" alt="">
            </div>
        </div>
        <div class="content-container" ref="chatContainer">
            <CustomItemChat v-for="item in chatItemData" :itemData="item" :key="item.id"
                @picketClick="openPicketMask" />
            <img class="img-abs" style="top:100px" :src="icon_b5" height="40px" alt="">
            <img class="img-abs" style="top:180px" :src="icon_eh" height="45px" alt="">
        </div>
        <div class="tab-container">
            <img :src="icon_cm" height="40px" alt="">
            <img :src="icon_ij" height="40px" alt="">
            <img :src="icon_h7" height="40px" alt="">
            <img :src="icon_fm" height="40px" alt="">
            <img :src="icon_ic" height="40px" alt="">
        </div>
        <CustomTip :itemData="{}" />
        <div class="popup-container" v-show="showPopup">
            <div class="popup-box">
                <div class="popup-box-top">
                    <div class="icon-box">
                        <img :src="packetItemData.avatar" style="width: 100%;height: 100%;" alt="">
                    </div>
                    <div class="popup-text-1">{{ packetItemData.userName }}发出的红包</div>
                </div>
                <div class="popup-text-2">我已提现，分你好运气</div>
                <div class="popup-box-bottom">
                    <div class="popup-text-3">{{ packetItemData.amount }}</div>
                    <div class="popup-text-4">金币</div>
                </div>
                <div class="v-button" @click="openAD"></div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
function getRewardVideoAdStatus(orderTag: string, adId: string, status: string) {
    console.log('orderTag', orderTag, adId, status);

}
import { ref, onMounted, watch, onActivated } from 'vue';
const tokenStore = useTokenStore();
const codeFromUrlStore = useCodeFromUrlStore()
import CustomItemChat from '../components/CustomItemChat/index.vue'
import CustomTip from '../components/CustomTip/index.vue'
import { useTokenStore } from '../../stores/modules/user';
import { useCodeFromUrlStore } from '../../stores/modules/codeFromUrl';
import icon_h5 from '@/assets/image/h5.webp'
import icon_h6 from '@/assets/image/h6.webp'
import icon_h7 from '@/assets/image/h7.webp'
import icon_cm from '@/assets/image/cm.webp'
import icon_fm from '@/assets/image/fm.webp'
import icon_ic from '@/assets/image/ic.webp'
import icon_ij from '@/assets/image/ij.webp'
import icon_eh from '@/assets/image/eh.webp'
import icon_b5 from '@/assets/image/b5.webp'
import icon_a4 from '@/assets/image/a4.webp'
import { ItemChatProps } from '../type';
import { mockItemData } from './const';
import { utils } from '../../utils';
import { postToken, getChatInfo, getRedPacket, postReciveRedPacket } from '../../api/Home';
const chatContainer = ref<any>(null);
const showPopup = ref<boolean>(false)
const chatItemData = ref<ItemChatProps[]>([])
const markItemData = ref<ItemChatProps[]>([])
const packetItemData = ref<ItemChatProps | any>({});

// 滚动到底部的函数
const scrollToBottom = () => {
    setTimeout(() => {
        if (chatContainer.value) {
            chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
        }
    }, 200);
}

// 获取红包信息
const getRedPacketInfo = async (item: any) => {
    const { code, data } = await getRedPacket()
    if (`${code}` === '0') {
        console.log('openPicketMask item', item);
        showPopup.value = true
        packetItemData.value = { ...item, ...data }
    }
}
// 打开红包的模态框
const openPicketMask = (item: any) => {
    getRedPacketInfo(item)
}
// 点击“开” 打开广告
const openAD = () => {
    // 调用原生方法出发广告
    utils.bridge('playRewardVideoAd', {
        "adId": "addvalue",
        "orderTag": "orderTagValue"
    })
    // setTimeout(() => {
    //     _postReciveRedPacket()
    // }, 5000);
}

// 最后实际领取红包
const _postReciveRedPacket = async () => {
    const { code, data } = await postReciveRedPacket(packetItemData.value.rewardId)
    if (`${code}` === '0') {
    }
}

const startPushChatItem = () => {
    setTimeout(() => {
        if (markItemData.value.length) {
            chatItemData.value.push(markItemData.value.shift()!)
            scrollToBottom();
            startPushChatItem()
        }
    }, 1000);
}
//获取聊天信息
const _getChatInfo = async () => {
    const { code, data } = await getChatInfo()
    if (`${code}` === '0') {
        chatItemData.value = data.slice(0, 8)
        markItemData.value = data.slice(8)
        startPushChatItem()
    }
}

const formtParamsToQuery = (params: any, excludeKey: string[] = []) => {
    const locationHost = window.location.href.split('?')[0]
    let targetUrl = `${locationHost}?`
    Object.keys(params).forEach(key => {
        if (!excludeKey.includes(key)) {
            targetUrl += `${key}=${params[key]}&`
        }
    })
    return targetUrl.slice(0, -1)
}

const _postToken = async (importURLParams: any) => {
    // 测试用的url后缀
    // game_uid：游戏uid
    // is_verified：用户是否实名认证
    // timestamp ：当前时间戳，单位：毫秒
    // grant_type=SIGN&userId=123&sign=sdfsfd&game_uid=123&is_verified=true&timestamp=
    let transKey: { code?: string } = {}
    if (importURLParams.trans_key) {
        transKey = JSON.parse(importURLParams.trans_key || '{}') || {}
    }
    const { code, data } = await postToken(importURLParams)
    if (`${code}` === '0') {
        tokenStore.setTokenData(data);
        codeFromUrlStore.setCode(transKey.code)
        const redirectUrl: string = formtParamsToQuery(importURLParams, ['sign', 'trans_key'])
        window.location.replace(redirectUrl)
        window.location.reload()
    }
}

onActivated(async () => {
    const importURLParams: any = utils.queryParse(window.location.href)
    if (importURLParams.sign) {
        _postToken({ ...importURLParams })
    } else {
        if (tokenStore.tokenData.loginSessionId) {
            _getChatInfo()
        } else {
            _postToken({ ...importURLParams })

        }
    }
})

onMounted(() => {
    scrollToBottom();
});
</script>

<style lang="scss" scoped>
.container {
    height: 100vh;
    overflow: hidden;
    background-color: $color_bg_grey;
    display: flex;
    flex-direction: column;

    .top-container {
        height: 50px;
        padding: 10px 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .top-left-box {
            font-size: 18px;
            color: $color_text_dark;
        }

        .top-right-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #7F7F7F;
            border-radius: 30px;
            width: 120px;
            height: 35px;
        }
    }

    .content-container {
        flex: 1;
        background-color: #F1F1F1;
        position: relative;
        padding: 10px;
        overflow: scroll;

        .img-abs {
            position: fixed;
            right: 10px;
        }
    }

    .tab-container {
        height: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
}

.popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    display: flex;
    justify-content: center;
    align-items: center;

    .popup-box {
        width: 70vw;
        height: 50%;
        background-image: url('../../assets/image/a4.webp');
        background-size: cover;
        margin-top: -40px;
        display: flex;
        flex-direction: column;
        align-items: center;

        .popup-box-top {
            display: flex;
            margin-top: 25px;
        }

        .icon-box {
            width: 30px;
            height: 30px;
            margin-right: 4px;
        }

        .popup-text-1 {
            color: #f2e0bd;
            font-size: 12px;
            display: flex;
            align-items: center;
        }

        .popup-text-2 {
            color: #f2e0bd;
            font-size: 22px;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .popup-box-bottom {
            display: flex;
            align-items: flex-end;
        }

        .popup-text-3 {
            color: #f2e0bd;
            font-size: 24px;
            font-weight: bold;
        }

        .popup-text-4 {
            color: #f2e0bd;
            font-size: 14px;
            margin-left: 5px;
        }

        .v-button {
            position: absolute;
            width: 25vw;
            height: 25vw;
            left: 38vw;
            bottom: 69vw;
        }
    }
}
</style>